<template>
  <div class="time-input">
    <el-input
      ref="inputRef"
      v-model="displayValue"
      :placeholder="placeholder || '输入时间，如 926 → 09:26'"
      clearable
      @input="handleInput"
      @blur="handleBlur"
      @keydown.enter="handleBlur"
      style="width: 100%"
    />
  </div>
</template>

<script setup lang="ts">
import { ElInput } from 'element-plus'
import { ref, watch } from 'vue'

interface Props {
  modelValue?: string
  placeholder?: string
}

interface Emits {
  (e: 'update:modelValue', value: string | undefined): void
  (e: 'change', value: string | undefined): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const inputRef = ref<InstanceType<typeof ElInput> | null>(null)
const displayValue = ref<string>(props.modelValue || '')

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  displayValue.value = newVal || ''
})

/**
 * 时间格式化函数 - 重构版本
 */
function formatTime(input: string): string | null {
  if (!input) return null
  
  // 只保留数字
  const digits = input.replace(/\D/g, '')
  if (!digits) return null
  
  let hours = 0
  let minutes = 0
  
  if (digits.length === 1 || digits.length === 2) {
    // 1-2位数字：当作小时 (如 9 → 09:00, 12 → 12:00)
    hours = parseInt(digits)
    minutes = 0
  } else if (digits.length === 3) {
    // 3位数字：第1位小时，后2位分钟 (如 926 → 09:26)
    hours = parseInt(digits[0])
    minutes = parseInt(digits.slice(1))
  } else if (digits.length === 4) {
    // 4位数字：前2位小时，后2位分钟 (如 1025 → 10:25)
    hours = parseInt(digits.slice(0, 2))
    minutes = parseInt(digits.slice(2))
  } else {
    return null
  }
  
  // 验证范围
  if (hours > 23 || minutes > 59) {
    return null
  }
  
  // 格式化为HH:MM
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
}

/**
 * 处理输入事件 - 只在4位数字时立即格式化
 */
function handleInput(value: string) {
  displayValue.value = value

  // 只在纯数字且长度为4时立即格式化
  const digits = value.replace(/\D/g, '')

  // 只有当输入是纯数字且长度正好是4时才格式化
  if (value === digits && digits.length === 4) {
    const formatted = formatTime(digits)
    if (formatted) {
      displayValue.value = formatted
      emit('update:modelValue', formatted)
      emit('change', formatted)
    }
  }
}

/**
 * 处理失焦事件
 */
function handleBlur() {
  const formatted = formatTime(displayValue.value)
  if (formatted) {
    displayValue.value = formatted
    emit('update:modelValue', formatted)
    emit('change', formatted)
  } else if (displayValue.value) {
    // 如果格式化失败，清空输入
    displayValue.value = ''
    emit('update:modelValue', undefined)
    emit('change', undefined)
  }
}
</script>

<style scoped>
.time-input {
  position: relative;
}
</style>
